<!DOCTYPE html>
<html>
<head>
	<title>Getting started with Visual Studio Tools for Apache Cordova</title>
	<style type="text/css">
		.startpage 			{ margin: 0; font: 15px 'Segoe UI', tahoma, arial, helvetica, sans-serif; text-align: left; min-width: 980px; color: #333; }

		a:link				{ text-decoration: none; color: #3399ff; }
		a:visited			{ text-decoration: none; }


		.nav 				{ font-size: 13px; display: block; margin: 0; padding: 18px 38px}
		.nav a				{ display: inline-block; text-align: left; padding-left: 45px; }
		.nav a:first-child	{ padding-left: 0px; }
		.nav a:link			{ text-decoration: none; color: #333; }
		.nav a:hover		{ color: #9b4f96; }


		.hero 				{ background-color: #5C2D91; color: #FFFFFF; padding: 16px 38px 16px; 
							  background-repeat: no-repeat;
							  background-image: url() }
		.hero > h1			{ font-size: 45px; font-weight: normal; margin: 0; padding: 0; }
		.hero > h2			{ font-size: 15px; font-weight: normal; margin: 15px 0; padding: 0; }

		.hero table			{ width: 1000px; margin: 10px 0 0 0; }
		.hero tr 			{ vertical-align: top; }

		.step a				{ color: white; font-size: 21px; }
		.step .snum			{ font-size: 90px; display: inline-block; }
		.step .jumplink		{ display: inline-block; width: 125px; vertical-align: super; }


		.pagewrap			{ margin: 0 auto 0 0; padding: 44px 38px 37px 38px; clear: both; overflow-x: hidden; }		
		.pagewrap.altbg		{ background-color: #F5F5F5; }

		.restricted			{ width: 980px; }

		.stepcontent		{ margin: 0; width: 370px; float: left; }
		.stepcontent > h2	{ font-size: 21px; font-weight: normal; margin: 0 0 21px 0; padding: 0; color: #9b4f96; }

		.stepcontent .moreinfo 	{ margin-top: 38px; }

		.stepimage 			{ width: 530px; float: right; }
		.stepimage img 		{ width: 530px; height: 257px; margin-top: 52px; border: 1px solid #ccc; }
		
		.altbg .stepcontent { float: right; }
		.altbg .stepimage   { float: left; }


		.sidekick			{ padding: 37px 33px 43px 480px; margin: 0; background-color: #00ABEC; color: #FFFFFF;
							  background-position: 140px 36px; 
							  background-repeat: no-repeat;
							  background-image: url() }
		.sidekick > h2		{ font-size: 31px; font-weight: normal; margin: 0; padding: 0; }
		.cpsloal > h3		{ font-size: 21px; font-weight: normal; margin: 48px 0 0 0; padding: 0; }
		.cpsloal p.alatsea	{ margin: 0; }
		
		.sidekick p 		{ margin-top: 0px; }
		.sidekick a 		{ padding: 0.5em 2em; background-color: #89c402; color: white; margin-top: 15px;  margin-right: 7px; text-transform: uppercase; display: inline-block; }
		.sidekick a:hover	{ background-color: #6A9800; }

		.feedbackhero 			{ padding: 37px 33px 43px 480px; background-color: #FAFAFA; }
		.feedbackhero a 		{ padding: 0.5em 2em; background-color: #00bcf2; color: black; margin-top: 2em; }
		.feedbackhero a:hover	{ background-color: black; color: white; }

	</style>
</head>
<body class="startpage">
	<div class="nav">
			<a target="_blank" href="http://go.microsoft.com/fwlink/?LinkID=533110">VisualStudio.com</a>
			<a target="_blank" href="http://go.microsoft.com/fwlink/?LinkID=533111">Documentation</a>
			<a target="_blank" href="http://go.microsoft.com/fwlink/?LinkID=533112">Videos</a>
			<a target="_blank" href="http://go.microsoft.com/fwlink/?LinkID=533113">Samples</a>
			<a target="_blank" href="http://go.microsoft.com/fwlink/?LinkID=533114">FAQ</a>
			<a target="_blank" href="http://go.microsoft.com/fwlink/?LinkID=533115">Known Issues</a>
			<a target="_blank" href="http://go.microsoft.com/fwlink/?LinkID=533116">Support</a>
	</div>
	<div class="hero">
		<h1>Getting started</h1>
		<h2>You're all set to build apps for Android, iOS, Windows and Windows Phone using Apache Cordova</h2>
		<table>
			<tr>
				<td class="step">
					<a href="#add_device_capabilities">
						<span class="snum">1 </span>
						<span class="jumplink">Add Device Capabilities</span>
					</a>
				</td>
				<td class="step">
					<span class="shadow"></span>
					<span class="snum">2 </span>
					<span class="jumplink"><a href="#edit_code">Use the Code You Know</a></span>
				</td>
				<td class="step">
					<span class="shadow"></span>
					<span class="snum">3 </span>
					<span class="jumplink"><a href="#build_and_run">Build &amp; Run Your App</a></span>
				</td>
				<td class="step">
					<span class="shadow"></span>
					<span class="snum">4 </span>
					<span class="jumplink"><a href="#debug_and_diagnose">Debug &amp; Diagnose</a></span>
				</td>
			</tr>
		</table>
	</div>


	<div class="pagewrap">
		<div class="restricted">
			<div class="stepcontent">
				<h2 id="add_device_capabilities">Add Device Capabilities (plugins)</h2>
				<p>Apache Cordova uses plugins to provide access to native device capabilities that aren't available to simple web apps; capabilities like the file system, camera, accelerometer or device contacts.</p>
				<p>To add device capabilities, open <strong>config.xml</strong> in your project root. This will launch the App Configuration Manager where you'll find a Plugins tab offering core plugins validated by Microsoft.  You can also add custom plugins from any of the hundreds created by <a target="_blank" href="http://go.microsoft.com/fwlink/?LinkID=533117">the community</a>. </p>

				<p>Try adding this custom test plugin now: <a target="_blank" href="http://go.microsoft.com/fwlink/?LinkID=533118">https://github.com/MSOpenTech/cordova-plugin-test</a></p>


				<p class="moreinfo"><a target="_blank" href="http://go.microsoft.com/fwlink/?LinkID=533119">Read the Docs</a> | <a target="_blank" href="http://go.microsoft.com/fwlink/?LinkID=533120">Watch the Video</a></p>
			</div>
			<div class="stepimage">
				<img width='685' height='332' title='' alt='' src=''>
			</div>
		</div>	
	</div>

	<div class="pagewrap altbg">
		<div class="restricted">
			<div class="stepcontent">
				<h2 id="edit_code">Use the Code You Know</h2>
				<p>If you know how to build web apps, you'll quickly feel at-home building mobile apps for iOS, Android and Windows using Apache Cordova. You can use your favorite JavaScript framework when building your app (e.g. Angular, React, Ionic).</p>
				<p>Try it now by adding your favorite JavaScript framework to the scripts folder and editing your app code.</p>
				<p class="moreinfo"><a target="_blank" href="http://go.microsoft.com/fwlink/?LinkID=533121">Read the Docs</a> | <a target="_blank" href="http://go.microsoft.com/fwlink/?LinkID=533122">Watch the Video</a></p>
			</div>
			<div class="stepimage">
				<img width='685' height='332' title='' alt='' src=''>
			</div>
		</div>
	</div>

	<div class="pagewrap">
		<div class="restricted">
			<div class="stepcontent">
				<h2 id="build_and_run">Build &amp; Run (on emulators and devices)</h2>
				<p>You can build &amp; deploy your app to devices and emulators running Android, iOS, Windows, and Windows Phone.</p>
				<p>Most developers prefer to work in the browser when they're just getting started. The Ripple emulator runs in Chrome and is the default deploy target for new projects. Try it now by pressing the "play" button in the toolbar with Ripple selected. Chrome will open and load your application.</p>
				
				<p class="moreinfo"><a target="_blank" href="http://go.microsoft.com/fwlink/?LinkID=533123">Read the Docs</a> | <a target="_blank" href="http://go.microsoft.com/fwlink/?LinkID=533124">Watch the Video</a></p>
			</div>
			<div class="stepimage">
				<img width='685' height='332' title='' alt='' src=''>
			</div>
		</div>
	</div>

	<div class="pagewrap altbg">
		<div class="restricted">
			<div class="stepcontent">
				<h2 id="debug_and_diagnose">Debug &amp; Diagnose</h2>
				<p>Anywhere you can run your app, you can debug it using Visual Studio's debug and diagnostic tools -- whether it's a tethered device, emulator, or browser.</p>
				<p>Try it now by setting a breakpoint in <strong>index.js</strong> and pressing the play button.  When you hit the breakpoint, try inspecting the application state by hovering over a variable in your code editor.</p>
				<p><a target="_blank" href="http://go.microsoft.com/fwlink/?LinkID=533125">Read the Docs</a> | <a target="_blank" href="http://go.microsoft.com/fwlink/?LinkID=533126">Watch the Video</a></p>
			</div>
			<div class="stepimage">
				<img width='685' height='332' title='' alt='' src=''>
			</div>
		</div>
	</div>

	<div class="sidekick cpsloal">
		<h2>Mobile Services</h2>
		<p>Add a cloud backend to your app in minutes</p>
		<ul>
			<li>Host a .NET or Node.js web API with 24x7 monitoring and management</li>
			<li>Use single sign-on with Active Directory, Facebook, Twitter, and Google</li>
			<li>Push notifications to individual users and dynamic audience segments</li>
			<li>Store data in SQL, Table Storage, and MongoDB</li>
			<li>Access on-premises systems, Office 365, and SharePoint</li>
			<li>Use cloud-based sync to build apps that work offline</li>
		</ul>
		<a target="_blank" href="http://go.microsoft.com/fwlink/?LinkID=533127">Start Tutorial</a>
	</div>


	<div class="feedbackhero">
		<h3>Was this page helpful?</h3>
		<p class="alatsea">Your feedback about this content is important. Let us know what you think.</p>
		<a target="_blank" href="http://go.microsoft.com/fwlink/?LinkID=533128">Yes</a>
		<a target="_blank" href="http://go.microsoft.com/fwlink/?LinkID=533129">No</a>
	</div>


</body>
</html>